<template>
    <div class="fsdb">
        <headerCont :page="'login'"></headerCont>
        <div class="fsdblist">
            <div class="result_list_tit">
                <span>复审成果</span>
            </div>
            <div class="tableList">
                <table style="text-align:center;" width="1360"  align="center" cellpadding="">
                    <thead>
                        <tr>
                            <th width="40">序号</th>
                            <th width="100">成果编号</th>
                            <th width="210">成果名称</th>
                            <th width="100">成果类别</th>
                            <th width="100">答辩分组</th>
                            <th width="200">答辩会场</th>
                            <th width="70">PPT比例</th>
                            <th width="100">答辩时间</th>
                            <th width="70">答辩序号</th>
                            <th width="100">答辩PPT上传截止日期</th>
                            <th width="150">上传状态（50M以内,ppt/pptx/mp4/wmv/avi/rar/zip）</th>
                            <th width="110">复审报名状态</th>
                            <th width="110">答辩群</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item, index) in yblist" :key="index">
                            <td>{{index+1}}</td>
                            <td>{{item.cxj_xmbh}}</td>
                            <td style="text-align: left;">{{item.cxj_mc_zw}}</td>
                            <td>{{item.fl_mc}}</td>
                            <td>{{item.fs_fz_mc}}</td>
                            <td>{{item.fs_fz_hcmc}}</td>
                            <td>{{item.bz1}}</td>
                            <td>{{item.fs_sj_rq}}</td>
                            <td>{{item.xm_xh}}</td>
                            <td>{{item.jzsj}}</td>
                            <td>
                              <!--
                                                             <span>待定</span>
                              -->

                                                                                          <span v-if="item.ppt_sfsc=='未上传'" >
                                                                                              <em>未上传</em>
                                                                                              <em class="pointer scppt" @click="handleUploadppt(item,index)">(上传)</em>
                                                                                          </span>
                                                                                          <span v-else >
                                                                                            <em>已上传</em>
                                                                                              <em class="pointer scppt" @click="handleUploadppt(item,index)">(上传 |</em>
                                                                                              <em class="pointer scppt" @click="downppt(item)"> 下载)</em>
                                                                                          </span>
                                                                                          <input type="file" style="display:none;" class="pointer ppt" :id="'ppt'+index" accept=".ppt,.pptx,.mp4,.wmv,.avi,.rar,.zip" @change="uploadppt(item,index)"/>

                         </td>
                         <td>
                             <span v-if="item.is_bm=='已报名'||item.is_bm=='1'">已报名</span>
                           <!--
                             <span v-else class="pointer scppt" @click="tobm"><em style="color: #444444;">未报名</em>(报名)</span>
                         -->
                          </td>
                          <td>
                              <viewer :images="images">
                                  <img v-if="item.fs_fz_mc=='标准组'" src="../../../assets/groupQrCode/标准组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='技术一组'" src="../../../assets/groupQrCode/技术一组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='技术二组'" src="../../../assets/groupQrCode/技术二组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='技术三组'" src="../../../assets/groupQrCode/技术三组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='技术四组'" src="../../../assets/groupQrCode/技术四组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='技术五组'" src="../../../assets/groupQrCode/技术五组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='技术六组'" src="../../../assets/groupQrCode/技术六组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='技术7'" src="../../../assets/groupQrCode/技术7.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='技术8'" src="../../../assets/groupQrCode/技术8.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='系统一组'" src="../../../assets/groupQrCode/系统一组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='系统二组'" src="../../../assets/groupQrCode/系统二组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='系统三组'" src="../../../assets/groupQrCode/系统三组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='系统四组'" src="../../../assets/groupQrCode/系统四组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='专利1'" src="../../../assets/groupQrCode/专利1.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='专利2'" src="../../../assets/groupQrCode/专利2.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='信息化一组'" src="../../../assets/groupQrCode/信息化一组.jpg" class="u-pic" />
                                  <img v-else-if="item.fs_fz_mc=='信息化二组'" src="../../../assets/groupQrCode/信息化二组.jpg" class="u-pic" />
                              </viewer>
                          </td>
                      </tr>
                  </tbody>
              </table>
          </div>
      </div>
      <footer-cont></footer-cont>
  </div>
</template>

<script>
import {
  cxjfs_myFsxmList,
  cxjfs_pptUpload,
  fileDownload
} from '@/api/shenbao'
import headerCont from '@/views/declarationSystem/common/header';
import footerCont from '@/views/declarationSystem/common/footer';
export default {
  name:'fsdb',
  data() {
      return {
          yblist: [],
          images: [
              "../../../assets/groupQrCode/标准.jpg",
              "../../../assets/groupQrCode/技术1.jpg",
              "../../../assets/groupQrCode/技术2.jpg",
              "../../../assets/groupQrCode/技术3.jpg",
              "../../../assets/groupQrCode/技术4.jpg",
              "../../../assets/groupQrCode/技术5.jpg",
              "../../../assets/groupQrCode/管理1.jpg",
              "../../../assets/groupQrCode/管理2.jpg",
              "../../../assets/groupQrCode/管理3.jpg",
              "../../../assets/groupQrCode/管理4.jpg",
              "../../../assets/groupQrCode/管理5.jpg",
              "../../../assets/groupQrCode/管理6.jpg",
              "../../../assets/groupQrCode/专利1.jpg",
              "../../../assets/groupQrCode/专利2.jpg",
              "../../../assets/groupQrCode/信息化1.jpg",
              "../../../assets/groupQrCode/信息化2.jpg"
          ]
      }
  },
  components: {
      headerCont,
      footerCont
  },
  methods: {
      handleUploadppt(item,index) {
          var jzsj = new Date(item.jzsj).getTime();
          var curTime = new Date().getTime();
          if (curTime>jzsj) {
              this.$message.warning('已超过上传截止日期');
              return
          }
          const choosefile = document.querySelector('#ppt'+index);
          choosefile.click();
      },
      uploadppt(item, index) {
          let that = this;
          const files = document.getElementById('ppt'+index).files[0];
          if (files) {
              let formData = new FormData();
              formData.append('cxj_cxj_id', item.id);
              formData.append('file', files);
              if(item.pptid) {
                  formData.append('id',item.pptid);
              } else {
              }
              cxjfs_pptUpload(formData).then(res=>{
                  document.getElementById('ppt'+index).value = null;
                  console.log(res, 'res')
                  let data = res.data;
                  if (data.success) {
                      that.$message.success('上传成功');
                      that.getcxjfs_myFsxmList();
                  } else {
                      that.$message.error(data.message);
                  }
              }).catch(err=>{
                  console.log(err)
              })
          }
      },
      downppt(item) {
          let that = this;
          let fileType = item.file_path.split('.')[1];
          fileDownload({
              cxj_cxj_id: item.id,
              path: item.file_path
          }).then(res=>{
              that.downfn('答辩PPT', res, fileType)
          })
      },
      downfn(title, res, fileType) {
          const data = res.data;
          const url = window.URL.createObjectURL(new Blob([data], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}))
          const link = document.createElement('a')
          link.style.display = 'none'
          link.href = url;
          link.setAttribute('download', title+'.'+fileType)
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link)
      },
      tobm() {
          window.open('https://huiyi.cec.org.cn/HYPXQT/hy_hy/goDetail?id=HY2022031')
      },
      getcxjfs_myFsxmList() {
          var userid = JSON.parse(sessionStorage.getItem('logindata'));
          cxjfs_myFsxmList({user_id: userid.userInfo.id}).then(res=>{
              if (res.data.code=='200') {
                  this.yblist = res.data.result;
              }
          })
      },
  },
  mounted() {
      this.getcxjfs_myFsxmList();
  }
}
</script>

<style lang="less" scoped>
.fsdblist {
  width: 1360px;
margin: 0 auto;
  min-height: 460px;
  position: relative;
}
.result_list_tit {
  width: 100%;
  border-bottom: 1px solid #EEEEEE;
  span {
      display: inline-block;
      margin-top: 28px;
      padding-bottom: 14px;
      font-size: 18px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 500;
      color: #333333;
      line-height: 25px;
      border-bottom: 3px solid #3388EE;
  }
}
.tableList {
  margin-top: 30px;
  table {
      margin-top: 20px;
      background: #FFFFFF;
    border-left:solid 1px #ddd;
    border-top:solid 1px #ddd;
      thead {
          background: #F5F5F5;
          tr {
              th {
                  height: 54px;
                  font-size: 16px;
                  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                  font-weight: 500;
                  color: #333333;
                border-right:solid 1px #ddd;
                border-bottom:solid 1px #ddd;
              }
          }
      }
      tbody {
          tr {
              height: 52px;
              border-bottom: 1px solid #E8E8E8;
              td {
                  color: #444444;
                  font-size: 14px;
                  font-weight: 400;
                  height: 52px;
                border-right:solid 1px #ddd;
                padding:5px;
              }
              span {
                  em {
                      font-style: normal;
                  }
              }
              .green_td {
                  span {
                      padding: 2px 4px;
                      background: #E1F3D9;
                      border-radius: 2px;
                      color:#48862C;
                      font-size: 14px;
                  }
              }
              .orange_td {
                  span {
                      padding: 2px 4px;
                      background: #F7D194;
                      border-radius: 2px;
                      color:#865C2C;
                      font-size: 14px;
                  }
              }
              .pink_td{
                  span {
                      padding: 2px 4px;
                      background: #FEE2E1;
                      border-radius: 2px;
                      color:#864F2C;
                      font-size: 14px;
                  }
              }
              &:nth-child(even){
                  background: #F5F5F5;
              }
              .chakan {
                  color:#1890FF;
                  font-style: normal;
                  font-size: 12px;
                  margin-left: 4px;
              }
          }
      }
  }
}
.scppt {
  color: #1890FF;
}
.u-pic {
  width: 30px;
}
</style>